<template>
  <div class="category">
    <van-nav-bar title="分类" fixed />
    
    <div class="category-container">
      <!-- 左侧分类导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="分类 1" />
        <van-sidebar-item title="分类 2" />
        <van-sidebar-item title="分类 3" />
        <van-sidebar-item title="分类 4" />
      </van-sidebar>

      <!-- 右侧内容区 -->
      <div class="category-content">
        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="i in 6"
            :key="i"
            icon="photo-o"
            :text="`商品 ${i}`"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Sidebar, SidebarItem, Grid, GridItem } from 'vant'

const activeKey = ref(0)
</script>

<style scoped>
.category {
  padding-top: 46px;
  height: 100vh;
  box-sizing: border-box;
}

.category-container {
  display: flex;
  height: calc(100% - 46px);
}

.category-content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}
</style> 